{% extends "pc/layout.html" %}
{% block content %}
<link rel="stylesheet" href="/css/pc/chapterDetail.css">
<link rel="stylesheet" href="/css/pc/startRead.css">
<div id="chapter">
    <div class="focus_img">
    </div>
    <div class="menu">
        {% for chapter in chapterPage %}
        <div class="fold">
            <ul class="chapters">
                <li class="chapter-item" data-index="1">
                    <h4>第{{loop.index}}章：{{chapter.title}}</h4>
                    <b>></b>
                </li>
            </ul>
            <ul class="sections">
                {% for section in chapter.dataValues.sectionList %}
                <a href="/section/{{section.id}}"><li class="section-item">第{{loop.index}}节：{{section.title}}</li></a>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    </div>

    <div id = "startRead">
        <p>简介</p>
        <div class="introduce">
            前端开发学习手册
        </div>
        <a href="/section/{{chapterPage[0].dataValues.sectionList[0].id}}"><button>开始阅读</button></a>
    </div>
</div>
<script src="/js/jquery-3.6.0.min.js"></script>
<script >
    let flag = true
    $(".chapters").click(function (){
        if(flag){
            $(this).next(".sections").slideDown(300)
            $(this).find("b").css("transform","rotate(90deg)")
            flag = !flag
        }else{
            $(this).next(".sections").slideUp(300)
            $(this).find("b").css("transform","rotate(0deg)")
            flag = !flag
        }
    })
</script>
{% endblock %}